<template>
    <div>
        <div class="form-box">
            <h2>登录页</h2>
            <van-form @submit="onSubmit" class="form">
                <van-field
                        v-model="username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>

</template>

<script>
    import {mapMutations} from "vuex";

    export default {
        name: "login",
        data(){
            return {
                username: "admin",
                password: "2"
            }
        },
        methods:{
            ...mapMutations(["login"]),
            onSubmit(){
                $.get("http://106.52.185.146/api/login", {
                    username: this.username,
                    password: this.password
                }).then(r => {
                    if(r.success){
                        this.login({
                            userName: r.data.user.trueName,
                            token: r.data.token
                        })
                        this.$router.push("/list")
                    } else {
                        this.$toast.fail(r.errMessage)
                    }
                });
                console.log(arguments)
            }
        }
    }
</script>

<style scoped>
    .form-box{
        margin-top: 20%;
    }
</style>
